<template>
	<view class="container" v-if="specState">
		<view class="uni-form-item uni-column item">
			<view class="example-body" style="">
				<view class="uni-form-item uni-column">
					<view v-for="(tmp,index) in allspecs" :key="index">
						<view class="uni-flex uni-row" style="margin-top: 10rpx;">
							<view class="title" style="width: 168rpx;">规格名称</view>
							<view class="text" style="-webkit-flex: 1;flex: 1;"><input class="uni-input" name="title" placeholder="请输入规格名称"
							data-name="title"	 :data-src="index" @input="changeSkuName" :value="tmp.title" /></view>
							<view class="text" style="width: 100rpx;">
								<image class="" style="position: relative;width: 60rpx;height: 60rpx;top:10% ;left:20%" :src="skuDel" :data-src="index"
								 @tap="delSku"></image>
							</view>
						</view>
						<view class="uni-flex uni-row" style="margin-top: 10rpx;">
							<view class="title" style="width: 168rpx;">产品属性</view>
							<view class="text" style="-webkit-flex: 1;flex: 1;"><input class="uni-input" name="itemStr" placeholder="多个产品属性以#隔开"
								data-name="itemStr" :data-src="index" @input="changeSkuPro" :value="tmp.itemStr" /></view>
							<view class="text" style="width: 100rpx;"></view>
						</view>
					</view>
					<view class="uni-flex uni-row" style="margin-top: 20rpx;">
						<view class="title" style="width: 168rpx;">规格设置</view>
						<view class="text" style="-webkit-flex: 1;flex: 1;"><button class="mini-btn" type="default" size="mini" style="height: 60rpx;margin-top: 5rpx;"
							 @click="addSku">添加规格</button></view>
						<view class="text" style="width: 100rpx;"></view>
					</view>
				</view>
				<!-- 选项卡菜单 -->
				<v-tabs
				  :value="status"
				  :scroll="true"
				  :tabs="nav"
				  :bold="false" 
				  @change="change" 
				  bgColor="transparent" 				 
				></v-tabs>
				<view v-if="allspecs.length>0" v-for="(tmp,index) in options" :key="index">
					<view class="uni-form-item uni-column" v-if="index == status">
						<!-- <view class="title"><text class="uni-form-item__title">{{ tmp.title }}</text></view> -->
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									预售价
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.presellprice" name="presellprice" type="digit"
									data-name="presellprice"	 placeholder="请输入零售价格" :data-src="index" @input="changeSkuDetail" /></view>

								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									现价
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.marketprice" name="marketprice" type="digit"
										data-name="marketprice" placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									原价
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.productprice" name="productprice" type="digit"
										 data-name="productprice" placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									成本价
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.costprice" name="costprice" type="digit"
										data-name="costprice" placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									编码
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.goodssn" name="goodssn" type="digit"
										data-name="goodssn" placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									条码
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.productsn" name="productsn" type="digit"
										data-name="productsn" placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									重量
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.weight" name="weight" type="digit"
									data-name="weight"	 placeholder="请输入现价" :data-src="index" @input="changeSkuDetail" /></view>
							
								</view>
							</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-left">
									库存
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.stock" name="stock" type="digit" placeholder="请输入商品库存"
									data-name="stock"		 :data-src="index" @input="changeSkuDetail" /></view>

								</view>
							</view>
							<view class="uni-list-cell" style="display: none;">
								<view class="uni-list-cell-left">
									重量
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.weight" name="weight" type="digit" placeholder="请输入重量(Kg)"
									data-name="weight"	 :data-src="index" @input="changeSkuDetail" /></view>

								</view>
							</view>
							<view class="uni-list-cell" style="display: none;">
								<view class="uni-list-cell-left">
									成本价格
								</view>
								<view class="uni-list-cell-db">
									<view class="uni-input"><input class="uni-input2" :value="tmp.costPrice" name="costPrice" type="digit"
									data-name="costPrice"	 placeholder="请输入成本价格" :data-src="index" @input="changeSkuDetail" /></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				<button class="cancel" type="default" @tap="onTapCancel">取消</button>
				<button class="submit" type="default" @tap="onTapSave">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	var t = getApp().globalData,
		e = t.requirejs('core'),
		i = t.requirejs('foxui'),
		a = t.requirejs('jquery');
	export default {
		 props:{
			
			id:0
		},
		data() {
			return {
				skuDel: '/static/img/del2.png',
				specState:false,
				allspecs:[],
				options:[],
				// 选项卡菜单
				nav:[],
				status:0
			}
		},
		created() {
			let s=this
			if(this.id){
				//读取规格数据
				e.post('article.spec', {id:this.id}, function(t) {
						s.allspecs=t.result.allspecs
						s.options=t.result.options
						
						// 选项卡菜单						
						for(let i=0;i<s.options.length;i++){
							s.nav[i] = t.result.options[i].title
						}
					})
				
			}
			
		},
		methods: {
			//菜单选择
			change(index){			
				this.status=index			
			},
			addSku(e) {
				let tmp = {
					title: '',
					itemStr: ''
				};
				this.allspecs.push(tmp);
			},
			delSku(e) {
				this.allspecs.splice(e.target.dataset.src, 1);
				this.updateSkuDetail()
			},
			changeSkuName(e) {
				this.allspecs[e.target.dataset.src].title = e.detail.value;
			},
			changeSkuPro(e) {
				//allspecs
				if (e.detail.value == '' || e.detail.value == null) {

				} else {
					if (this.allspecs[e.target.dataset.src].itemStr == '' || this.allspecs[e.target.dataset.src].itemStr == null) {
						uni.showToast({
							title: '请填写规格名称',
							icon: 'none'
						});
					}
					this.allspecs[e.target.dataset.src].itemStr = e.detail.value;
					this.updateSkuDetail()
				}

			},
			updateSkuDetail(){
				this.options = [];
				// this.allspecs itemStr 
			
				if (this.allspecs.length == 1) {
					for (let j = 0; j < this.allspecs[0].itemStr.split("#").length; j++) {
						let tmp = {
							presellprice:'',
							marketprice:'',	
							productprice:'',
							costprice:'',
							goodssn:'',
							productsn:'',
							weight:''
						};
						tmp.title = this.allspecs[0].itemStr.split("#")[j];
						tmp.index=j
						this.options.push(tmp)
						
					}
				}
				if (this.allspecs.length == 2) {
				
					for (let j = 0; j < this.allspecs[0].itemStr.split("#").length; j++) {
						for (let k = 0; k < this.allspecs[1].itemStr.split("#").length; k++) {
							let tmp = {
								presellprice:'',
								marketprice:'',	
								productprice:'',
								costprice:'',
								goodssn:'',
								productsn:'',
								weight:''
							};
							tmp.title = this.allspecs[0].itemStr.split("#")[j] + "-" + this.allspecs[1].itemStr.split("#")[k];
							tmp.index=j+'_'+k;
							this.options.push(tmp);
						}
					}
				}
				if (this.allspecs.length == 3) {
					for (let j = 0; j < this.allspecs[0].itemStr.split("#").length; j++) {
						for (let k = 0; k < this.allspecs[1].itemStr.split("#").length; k++) {
							for (let m = 0; m < this.allspecs[2].itemStr.split("#").length; m++) {
								let tmp = {
									presellprice:'',
									marketprice:'',	
									productprice:'',
									costprice:'',
									goodssn:'',
									productsn:'',
									weight:''
								};
								tmp.title = this.allspecs[0].itemStr.split("#")[j] + "-" + this.allspecs[1].itemStr.split("#")[k] + "-" + this.allspecs[
									2].itemStr.split("#")[m];
									tmp.index=j+'_'+k+'_'+m;
								this.options.push(tmp);

							}
						}
					}
				}
				// 选项卡菜单
				this.nav=[];
				for(let i=0;i<this.options.length;i++){					
					this.nav[i] = this.options[i].title
				}
								
			},
		
			//规格属性
			changeSkuDetail(e){
				this.options[e.target.dataset.src][e.target.dataset.name] = e.detail.value;
				
			},
			//取消事件
			onTapCancel(){
				this.specState=false
		
			},
			//数据提交
			onTapSave(){
			
				for(let i=0;i<this.allspecs.length;i++){
					if(this.allspecs[i].title==""||this.allspecs[i].title==null){
						uni.showToast({
							title: '请填写规格名称',
							icon: 'none'
						});
						return false;
					}
					if(this.allspecs[i].itemStr==""||this.allspecs[i].itemStr==null){
						uni.showToast({
							title: '请填写产品属性',
							icon: 'none'
						});
						return false;
					}
				}
				for(let i=0;i<this.options.length;i++){
					
					if(this.options[i].stock==""||this.options[i].stock==null){
						uni.showToast({
							title: '请填写库存',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].presellprice==""||this.options[i].presellprice==null){
						uni.showToast({
							title: '请填写预售价',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].productprice==""||this.options[i].productprice==null){
						uni.showToast({
							title: '请填写原价',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].marketprice==""||this.options[i].marketprice==null){
						uni.showToast({
							title: '请填写现价',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].costprice==""||this.options[i].costprice==null){
						uni.showToast({
							title: '请填写成本价',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].goodssn==""||this.options[i].goodssn==null){
						uni.showToast({
							title: '请填写编码',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].productsn==""||this.options[i].productsn==null){
						uni.showToast({
							title: '请填写条码',
							icon: 'none'
						});
						return false;
					}
					if(this.options[i].weight==""||this.options[i].weight==null){
						uni.showToast({
							title: '请填写重量',
							icon: 'none'
						});
						return false;
					}
				}
				
				//回调函数
				this.$emit('spec',{allspecs:this.allspecs,options:this.options})
				this.specState=false	
				
			
			}
			
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20rpx;
	}
	.flex{
		margin-top: 20rpx;
	}
	.name{
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.mini-btn{
		height: 60rpx;
		line-height: 60rpx;
		background: #5cb85c;
		color: #fff;
	}
	.creat{
		justify-content: center;
	}
	.creat .name{
		color: #5cb85c;
	}
	.del image{
		position: relative;
		width: 60rpx;
		height: 60rpx;
		top:50%;
		left:80%
	}
	.cform{
		padding: 20rpx;
	}
	.rows{
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 5rpx 5rpx #e2e2e2;
	}
	.topName{
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #eee;
	}
	.listchind{
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}
	.listtitle{
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #eee;
		padding-left: 20rpx;
	}
	.item {
		margin-bottom: 200rpx;
		.uni-input {
		    height: 50rpx;
		}
	}
	.listchind .uni-input{
		box-shadow: 0 0 10rpx 3rpx #e2e2e2;
	}
	.uni-flex.uni-row {
	    display: flex;
	    flex-direction: row;
	    line-height: 1.8;
	}
	.uni-input{
		padding: 14rpx 26rpx;
		background-color: #fff !important;
	}

	.container {
		position: fixed;
		box-sizing: border-box;
		top: 85rpx;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #F2F2F2;
		z-index: 999;		
		overflow-y: auto;
		padding-bottom: 205rpx;
		.footer {
			border-top: 1px solid #EDEDED;
			width: 100vw;
			position: fixed;
			bottom: 0;
			height: 100rpx;
			z-index: 10;
			background-color: #ffffff;
			box-shadow: 0 -5rpx 8rpx 3rpx #e2e2e2;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				margin: 0;
			}

			button:after {
				border: none;
			}

			button:active {
				opacity: 0.5;
			}

			.cancel {
				color: #fff;
				background: #c7c7c7;
			}

			.submit {
				background: #5cb85c;
				color: #ffffff;
				margin-left: 50rpx;
			}
			
		}
	}
	.container .footer uni-button{
		display: inline-block;
	}
	.uni-form-item.uni-column {
	    padding-left: 2%;
	    padding-right: 2%;
	    padding-top: 2%;
	}
	.uni-list-cell-left {
	    padding-top: 2%;
		padding-bottom: 2%;
		
	}
</style>
